<template>
	<view class="sub-kefu-content">
		<view class="order-top">
			<view class="kefu-title" style="color: #F4637A;font-weight: bold;font-size: 20px;">
				公告详情
			</view>
			<image src="../../../static/common/sub-order-back.png" class="sub-back-icon" @tap="backpage"></image>
		</view>
		
		<view class="messageDetail">
			<view class="notice">{{msgDetail.title}}</view>
			<view class="notice-time">
				<view class="notice-time-day">{{msgDetail.publishTime}}</view>
				<!-- <view class="notice-time-hours">22:42:09</view> -->
			</view>
			<view class="notice-text">
				<jyf-parser :html="msgDetail.content"  lazy-load ref="article" selectable
				 show-with-animation use-anchor @error="error" @imgtap="imgtap" @linkpress="linkpress" @ready="ready">加载中...</jyf-parser>
			</view>
		</view>
		
	</view>
</template>

<script>
	import jyfParser from '../../../components/jyf-parser/jyf-parser.vue';
	export default{
		name:"subMessage",
		data(){
			return{
				msgDetail:"",
				apptoken:""
			}
		},
		components:{
			jyfParser
		},
		onLoad(option) {
			this.apptoken = uni.getStorageSync("apptoken");
			this.getMsgDetail(option.articleId);
		},
		methods:{
			backpage(){
				this.$CommonJS.navigateBack();
			},
			getMsgDetail(articleId){
				//公告详情
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.notice_detail,
					data:{apptoken:this.apptoken,noticeId:articleId},
					success(res){
						console.log(res)
						_this.msgDetail = res.data.data;
					}
				})
			},
			ready(e) {
				console.log('ready', e);
				// console.log('api: getText', this.$refs.article.getText());
				console.log('imgList', this.$refs.article.imgList);
			},
			imgtap(e) {
				console.log('imgtap', e);
			},
			linkpress(e) {
				console.log('linkpress', e);
			},
			error(e) {
				console.error(e);
			}
		}
	}
</script>

<style scoped>
	.sub-kefu-content{
		width: 100%;
		height: auto;
		background:linear-gradient(180deg,rgba(255,234,240,1) 0%,rgba(255,234,211,1) 100%);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		letter-spacing: 0.5px;
	}
	.order-top{
		width: 100%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-top:72upx ;
		/* #ifdef H5 */
		margin-top: 36upx;
		/* #endif */
		
	}
	.sub-back-icon{
		width:58upx ;
		height: 58upx;
		position: absolute;
		top: 0;
		left:33upx ;
	}

	
	/*公告详情*/
	.messageDetail{
		width:calc(100% - 40upx);
		padding: 0 20upx;
		height:auto;
		/* background:rgba(255,255,255,1); */
		/* box-shadow:0px 9upx 36upx rgba(0,0,0,0.16);
		opacity:1;
		border-radius:27upx; */
		margin: 40upx 0 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.notice{
		width: 100%;
		font-size:16px;
		font-family:Alibaba PuHuiTi;
		font-weight:500;
		line-height:40upx;
		color:rgba(17,23,57,1);
		opacity:1;
		text-align: center;
		margin: 30upx 0 20upx 0;
		letter-spacing: 0.5px;
	}
	.notice-time{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		letter-spacing: 0.5px;
	}
	.notice-time-day,.notice-time-hours{
		font-size:14px;
		font-family:Alibaba PuHuiTi;
		font-weight:400;
		line-height:31upx;
		color:rgba(177,184,193,1);
		opacity:1;	
	}
	.notice-time-day{
		margin-right: 10upx;
	}
	.notice-text{
		width: calc(100% - 80upx);
		font-size:14px;
		font-family:Alibaba PuHuiTi;
		font-weight:400;
		line-height:50upx;
		color:rgba(17,23,57,1);
		opacity:1;
		margin: 30upx 0 20upx 0;
		padding: 0 40upx;
		letter-spacing: 0.5px;
	}
</style>
